import React, { useContext } from 'react';
import { Space, Button } from "antd";
import { MapCtx, type CesiumType } from "@/components/app/earth3dVis";

const imageUrl = "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png";

export const Mouse: React.FC = () => {
    const { drawRectangle } = useMouse();

    return <Space.Compact className="absolute" style={{right: 100, top: 10}}>
        <Button>绘制点</Button>
        <Button onClick={drawRectangle}>绘制矩形</Button>
        <Button>绘制多边形</Button>
        <Button>绘制圆</Button>
        <Button>绘制线段</Button>
    </Space.Compact>
}

const useMouse = () => {
    const { cesiumUtil } = useContext(MapCtx).gisMapStore;
    const { CE, viewer, mouse } = cesiumUtil;
    const { Cesium } = CE.Namespace;

    const drawRectangle = () => {
        (viewer.delegate.container as HTMLDivElement).style.cursor = 'cursor:crosshair';
        (viewer.delegate.container as HTMLDivElement).style.cursor = 'pointer';
        mouse.rectangle().then(({entity, rectangle, coordinates}) => {
            // 添加单张图片
            // cesiumUtil.addImageOverlay(imageUrl, rectangle);

            // 添加url瓦片
            const {dispose} = cesiumUtil.addUrlImageLayer(
                // "https://wind.dev.xiaoanshuju.com/ogc/ds/mapInfo?dsName=avgWindy&elementName=windSpeed&level=0&returnType=png&resample=false&x=10&y=5&z=4&polygonQuery={polygonQuery}", // 腾讯影像
                "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?&x={x}&y={y}&z={z}&dsName={dsName}&elementName={elementName}&level={level}&returnType=png&resample={resample}&polygonQuery={polygonQuery}",
                {
                    customTags:{
                        dsName: (imageryProvider: CesiumType.UrlTemplateImageryProvider, x: number, y: number, level: number) => "avgWindy",
                        elementName: (imageryProvider: CesiumType.UrlTemplateImageryProvider, x: number, y: number, level: number) => "windSpeed",
                        level: (imageryProvider: CesiumType.UrlTemplateImageryProvider, x: number, y: number, level: number) => "0",
                        resample: (imageryProvider: CesiumType.UrlTemplateImageryProvider, x: number, y: number, level: number) => false,
                        polygonQuery: (imageryProvider: CesiumType.UrlTemplateImageryProvider, x: number, y: number, level: number) =>{
                            return JSON.stringify({
                                "type":"Polygon",
                                "coordinates":[
                                    coordinates.map(({lng, lat}) =>([lng, lat]))
                                ],

                                // "coordinates":[
                                //     [
                                //         [
                                //             116.41937255859376,
                                //             30.160564279505948
                                //         ],
                                //         [
                                //             116.41937255859376,
                                //             30.3989375576187
                                //         ],
                                //         [
                                //             116.82449340820314,
                                //             30.3989375576187
                                //         ],
                                //         [
                                //             116.82449340820314,
                                //             30.160564279505948
                                //         ]
                                //     ]
                                // ]
                            })
                        }
                    }
                }
            );

        }).catch((e) => {
            console.error("报错->", e)
        })
    }

    return { drawRectangle }
}